import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons'; 
import Icons from 'react-native-vector-icons/FontAwesome5';

class PageTwo extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          show: false
      }
  }
  _onPressAddFolder =()=>{
    this.setState({
        show: true
    })
  }
  _onPressAdd =() =>{
    this.setState((previousState)=>{
        return ({
        show: !previousState.show,
        text: 'Placeholder'
        })
    })
  }
    _onPressSubmit=() =>{
      alert('添加文件夹');
      this.setState({
          show: false
      })
  }
  render(){
    let addDialogView = this.state.show ?
        <View style={styles.dialog} >
          <View style={styles.dialogModal} >
            <TouchableOpacity style={{flex:1}} onPress={() => { this._onPressAdd() }}>
            </TouchableOpacity>
          </View>
          <View style={styles.dialogWrap}>
            <View>
                <View style={styles.dialogTitle}>
                    <Text>新建文件夹</Text>
                </View>
              <View style={styles.dialogContent}>
                <TextInput
                autoFocus={true}
                clearButtonMode={true}
                placeholder="输入文件夹名"
                        style={styles.addInput}
                        value={this.state.inputVal}
                    />
              </View>
              <View style={styles.dialogFooter}>
              <Text  style={styles.cancel} onPress={()=>{this._onPressAdd()}}>
                取消
                </Text>
                <Text  style={styles.submit} onPress={()=>{this._onPressSubmit()}}>
                确定
                </Text>
              </View>
            </View>
          </View>
        </View>:null
    return (
      <View style={styles.container}>
      <View style={styles.titleBox}>
        <Text style={styles.titleInfo}>--</Text>
        <Text style={styles.titleInfo}>中达</Text>
        <Icon style={{color: '#158fff'}} name='ios-cloud-circle' size={22}/>
        <Text style={styles.titleInfo}>，让文件管理更容易</Text>
        <Text style={styles.titleInfo}>--</Text>
      </View>
      <View style={styles.btnBox}>
        <TouchableOpacity>
          <View style={styles.btnItems}>
            <View style={[styles.iconBox,{backgroundColor:'#70a0f5'}]}>
              <Icons style={{color: '#fff'}} name='file-alt' size={30}/>
            </View>
            <Text style={styles.btnText}>新建文件</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={()=>{this._onPressAddFolder()}}>
          <View style={styles.btnItems}>
            <View style={[styles.iconBox,{backgroundColor:'#0ECAC7'}]}>
              <Icons style={{color: '#fff'}} name='folder-plus' size={30}/>
            </View>
            <Text style={styles.btnText}>新建文件夹</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View style={styles.btnItems}>
            <View style={[styles.iconBox,{backgroundColor:'#f39b5b'}]}>
              <Icons style={{color: '#fff'}} name='file-upload' size={30}/>
            </View>
            <Text style={styles.btnText}>上传文件</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={()=>Actions.uploadImage()}>
          <View style={styles.btnItems}>
            <View style={[styles.iconBox,{backgroundColor:'#9787f5'}]}>
              <Icons style={{color: '#fff'}} name='image' size={30}/>
            </View>
            <Text style={styles.btnText}>上传图片</Text>
          </View>
        </TouchableOpacity>
      </View>
      {addDialogView}
    </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent:'space-between',
    backgroundColor: '#eee',
  },
  titleBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 40,
    marginTop:100,
    backgroundColor:'#eee',
  },
  titleInfo: {
    color: '#ccc',
    fontSize:12,
  },
  btnBox: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems:'center',
    backgroundColor: '#eee',
    height: 120,
    marginBottom:20,
  },
  btnItems: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
  },
  iconBox: {
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 60,
  },
  btnText: {
    color: '#444',
    fontSize: 10,
    marginTop:5,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  },
  dialog:{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 10
  },
  dialogModal:{
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 20
  },
  dialogWrap:{
    width: '80%',
    backgroundColor: '#fff',
    position: 'absolute',
    left: '10%',
    top: '30%',
    borderRadius: 4,
    backfaceVisibility: "hidden",
  
    fontSize: 14,
    color: '#606266',
    zIndex:50
  },
  dialogTitle:{
    padding: 10,
    color: '#303133',
    fontWeight:'bold',
    alignItems: 'center'
  },
  dialogContent:{
    paddingTop: 12,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 20
  },
  dialogFooter:{
    borderTopColor:'#ebedf0',
    borderTopWidth: 1,
    height: 40,
    // padding: 10,
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  },
  addInput:{
    height: 40, 
    borderColor: '#ebedf0',
    borderWidth: 1,
    borderRadius: 4,
    fontSize: 12,
    paddingLeft: 10,
    paddingRight: 10
  },
  cancel:{
    flex: 1,
    textAlign: 'center',
    paddingTop: 10,
    paddingBottom: 10,
  },
  submit:{
    flex: 1,
    paddingTop: 10,
    paddingBottom: 10,
    textAlign: 'center',
    color: '#1989fa'
  }
});

export default PageTwo;